<template>
  <div class="greate-admin-form-page">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
      <el-form-item label="管理员名称" prop="userName">
        <el-input v-model="ruleForm.userName"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" v-model="ruleForm.checkPass" auto-complete="off">

        </el-input>
      </el-form-item>
      <el-form-item label="管理员角色" prop="role">
        <el-radio-group v-model="ruleForm.role">
          <el-radio label="1">超级管理员</el-radio>
          <el-radio label="2">普通管理员</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">
          {{userItem?'编辑':'立即创建'}}
        </el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import AdminApi from '@/api/admin';

export default {
  name: 'GreateAdminForm',
  props: ['dialogVisible', 'userItem'],
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        if (!this.userItem) {
          callback(new Error('请输入密码'));
        } else {
          callback();
        }
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        if (!this.userItem) {
          callback(new Error('请再次输入密码'));
        } else {
          callback();
        }
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        userName: this.userItem ? this.userItem.user_name : '',
        pass: '',
        checkPass: '',
        role: this.userItem ? this.userItem.status : '',
      },
      rules: {
        userName: [
          { required: true, message: '请输入管理员名称', trigger: 'blur' },
          {
            min: 2,
            max: 11,
            message: '长度在 2 到 11 个字符',
            trigger: 'blur',
          },
        ],
        pass: [
          { required: !this.userItem, message: '请输入密码', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' },
        ],
        checkPass: [
          {
            required: !this.userItem,
            message: '请再次输入密码',
            trigger: 'blur',
          },
          { validator: validatePass2, trigger: 'blur' },
        ],
        role: [{ required: true, message: '请选择管理角色', trigger: 'change' }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.userItem) {
            AdminApi.greateAdmin(this.ruleForm)
              .then((data) => {
                if (data.data) {
                  this.$message({
                    message: data.message,
                    type: 'success',
                  });
                  this.resetForm('ruleForm');
                  this.$emit('update:dialogVisible', false);
                } else {
                  this.$message({
                    message: data.message,
                    type: 'error',
                  });
                }
              })
              .catch((err) => {
                this.$message({
                  message: err.message,
                  type: 'error',
                });
              });
          } else {
            this.ruleForm.id = this.userItem.id;
            AdminApi.putUser(this.ruleForm)
              .then((data) => {
                if (data.data) {
                  this.$message({
                    message: data.message,
                    type: 'success',
                  });
                  this.resetForm('ruleForm');
                  this.$emit('update:dialogVisible', false);
                }
              })
              .catch((err) => {
                this.$message({
                  message: err.message,
                  type: 'error',
                });
              });
          }
        } else {
          // return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  watch: {
    userItem() {
      if (this.userItem) {
        this.rules.pass[0].required = false;
        this.rules.checkPass[0].required = false;
        this.ruleForm.userName = this.userItem.user_name;
        this.ruleForm.role = this.userItem.status;
      } else {
        this.ruleForm.userName = '';
        this.ruleForm.role = '';
        this.rules.pass[0].required = true;
        this.rules.checkPass[0].required = true;
      }
    },
  },
};
</script>

<style  lang="scss" scoped>
.greate-admin-form-page {
  width: 100%;
  height: 300px;
  padding: 15px;
}
</style>
